<template>
  <div class="mb_equity">
    <!-- 导航条 -->
    <div class="mb_nav_barbox">
      <van-nav-bar left-arrow @click-left="onClickLeft" title="权益" @click-right="onClickRight">
        <template #right>
          <van-icon name="weapp-nav" size="24" />
        </template>
      </van-nav-bar>
    </div>
    <!-- ./ 导航条 end here-->

    <van-tabs v-model:active="activetabs" color="#017DFF">
      <van-tab title="随心选">
        <!-- 视频随心选 -->
        <div class="needbox">
          <div class="innerbox">
            <van-cell :border="false" is-link>
              <template #title>
                <span class="custom-title">视频随心选</span>
                <van-tag type="danger">会员6选1+15GB定向流量</van-tag>
              </template>
              <template #right-icon>
                <van-icon name="question-o" class="question-o" size="16" color="#ababab" />
              </template>
            </van-cell>

            <div class="videobox">
              <ul>
                <li>
                  <van-image :src="require('@/assets/img/vi01.png')" />
                  <p>腾讯视频</p>
                </li>
                <li>
                  <van-image :src="require('@/assets/img/vi02.png')" />
                  <p>快手视频</p>
                </li>
                <li>
                  <van-image :src="require('@/assets/img/vi03.png')" />
                  <p>爱奇艺</p>
                </li>
                <li>
                  <van-image :src="require('@/assets/img/vi04.png')" />
                  <p>哔哩哔哩</p>
                </li>
                <li>
                  <van-image :src="require('@/assets/img/vi05.png')" />
                  <p>西瓜视频</p>
                </li>
                <li>
                  <van-image :src="require('@/assets/img/vi06.png')" />
                  <p>优酷视频</p>
                </li>
                <li>
                  <van-image :src="require('@/assets/img/vi06.png')" />
                  <p>优酷视频</p>
                </li>
              </ul>
            </div>

            <div class="mealbox">
              <h6>点击选择您要办理的套餐</h6>
              <div class="mealmain">
                <ul>
                  <li>
                    <!-- active选中样式 -->
                    <div class="meal_option active">
                      <i>特惠</i>
                      <h5>首月<span>1</span>元</h5>
                      <p>享15G流量+<br>视频会员月卡</p>
                    </div>
                  </li>
                  <li>
                    <div class="meal_option">
                      <i>五折购</i>
                      <h5><span>10</span>元/月</h5>
                      <p>享15G流量+<br>视频会员月卡</p>
                    </div>
                  </li>
                  <li>
                    <div class="meal_option">
                      <i>季包</i>
                      <h5><span>35</span>元/季</h5>
                      <p>季包优惠3个<br>自然月内有效</p>
                    </div>
                  </li>
                  <li>
                    <div class="meal_option">
                      <i>年包</i>
                      <h5><span>119</span>元/年</h5>
                      <p>年包优惠12个<br>自然月内有效</p>
                    </div>
                  </li>

                </ul>
              </div>
            </div>

            <div class="videobtn">
              <p class="tips">会员领取后30天内有效</p>
              <van-button size="small" round>立即办理</van-button>
            </div>
          </div>
        </div>
        <!-- ./ 视频随心选 end here -->

        <!-- 音乐随心选 -->
        <div class="needbox">
          <div class="innerbox">
            <van-cell :border="false" is-link>
              <template #title>
                <span class="custom-title">音乐随心选</span>
                <van-tag type="danger">会员6选1+15GB定向流量</van-tag>
              </template>
              <template #right-icon>
                <van-icon name="question-o" class="question-o" size="16" color="#ababab" />
              </template>
            </van-cell>

            <div class="videobox">
              <ul>
                <li>
                  <van-image :src="require('@/assets/img/music01.png')" />
                  <p>酷狗音乐</p>
                </li>
                <li>
                  <van-image :src="require('@/assets/img/music02.png')" />
                  <p>QQ音乐</p>
                </li>
                <li>
                  <van-image :src="require('@/assets/img/music03.png')" />
                  <p>网易云音乐</p>
                </li>
                <li>
                  <van-image :src="require('@/assets/img/music01.png')" />
                  <p>酷狗音乐</p>
                </li>
                <li>
                  <van-image :src="require('@/assets/img/music02.png')" />
                  <p>QQ音乐</p>
                </li>
                <li>
                  <van-image :src="require('@/assets/img/music03.png')" />
                  <p>网易云音乐</p>
                </li>
                <li>
                  <van-image :src="require('@/assets/img/music01.png')" />
                  <p>酷狗音乐</p>
                </li>
              </ul>
            </div>

            <div class="videobtn">
              <p class="tips">会员领取后30天内有效</p>
              <van-button size="small" round>10月/次</van-button>
            </div>
          </div>
        </div>
        <!-- ./ 视频随心选 end here -->

      </van-tab>
      <van-tab title="生活会员">生活会员</van-tab>
      <van-tab title="权益超市">权益超市</van-tab>
      <van-tab title="权益领取">权益领取</van-tab>
    </van-tabs>

    <!-- Tabbar 标签栏 -->
    <van-tabbar v-model="active" active-color="#017DFF" inactive-color="#666666">
      <van-tabbar-item icon="wap-home" name="mb-home" replace to="mb-home">首页</van-tabbar-item>
      <van-tabbar-item icon="bars" name="mb-class" replace to="mb-class">分类</van-tabbar-item>
      <van-tabbar-item icon="bookmark" name="mb-equity" replace to="mb-equity">权益</van-tabbar-item>
      <van-tabbar-item icon="manager" name="mb-ours" replace to="mb-ours">我的</van-tabbar-item>
    </van-tabbar>
    <!-- ./ Tabbar 标签栏 end here -->
  </div>
</template>


<script>
import { ref } from 'vue';
import { Toast, Tab, Tabs } from 'vant';
import 'vant/es/toast/style';

export default {
  setup() {
    const onClickLeft = () => history.back();
    const onClickRight = () => Toast('查看更多');
    const active = ref('mb-equity');
    const activetabs = ref(0);
    return {
      active,
      onClickLeft,
      onClickRight,
      activetabs,
    };
  },


};
</script>

<style lang="less">
.mb_equity {
  padding-top: 46px;
  padding-bottom: 64px;
}

/* 导航条 */
.mb_nav_barbox {
  position: fixed;
  z-index: 10000;
  top: 0;
  height: auto;
  width: 100%;
  clear: both;
}

/* ./ 导航条 end here */

/* 视频随心选 */
.needbox {
  margin-top: 12px;
  padding: 0 var(--van-padding-sm);

  .innerbox {
    background: white;
    border-radius: var(--van-border-radius-lg);
    overflow: hidden;
    padding-bottom: 12px;

    .van-cell {
      .van-cell__title {
        flex: 3;

        span {
          vertical-align: middle;
        }
      }

      .van-icon {
        vertical-align: middle;
        display: flex;
        justify-content: center;
        align-items: center
      }
    }

    .videobox ul::-webkit-scrollbar {
      display: none;
    }

    .videobox {
      padding: 0 var(--van-padding-xs);
      padding-bottom: 10px;
      position: relative;

      ul {
        overflow-x: auto;
        overflow-y: hidden;
        display: -webkit-box;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;

        li {
          width: 64px;
          position: relative;
          display: block;

          .van-image {
            width: 40px;
            height: 40px;
            margin: 0 auto;
            border-radius: 8px;
            display: block;
            overflow: hidden;
          }

          p {
            font-size: 12px;
            color: #323232;
            text-align: center;
            margin: 8px auto 0 auto;
          }
        }
      }
    }

    .mealbox {
      margin-top: var(--van-padding-md);

      h6 {
        color: var(--van-gray-8);
        text-align: center;
        margin: 0 auto 0 auto;
        font-size: var(--van-font-size-md);
      }

      h6::before {
        content: "";
        width: 24px;
        height: 24px;
        background-image: url("../../assets/img/icon_meal_title.jpg");
        background-size: 100% 100%;
        display: inline-block;
        vertical-align: middle;
        margin-right: 4px;
      }

      h6::after {
        content: "";
        width: 24px;
        height: 24px;
        background-image: url("../../assets/img/icon_meal_title.jpg");
        background-size: 100% 100%;
        display: inline-block;
        vertical-align: middle;
        margin-left: 4px;
        transform: rotateY(180deg);
      }

      .mealmain ul::-webkit-scrollbar {
        display: none;
      }

      .mealmain {
        padding: 0 var(--van-padding-xs);
        padding-bottom: 10px;
        position: relative;
        margin-top: var(--van-padding-sm);

        ul {
          overflow-x: auto;
          overflow-y: hidden;
          display: -webkit-box;
          -webkit-overflow-scrolling: touch;
          white-space: nowrap;

          li {
            width: 96px;
            position: relative;
            display: block;
            margin-right: var(--van-padding-xs);

            .meal_option {
              padding-top: var(--van-padding-lg);
              padding-bottom: var(--van-padding-md);
              background: #FFF8F0;
              color: var(--van-gray-8);
              border-radius: 8px;
              position: relative;

              i {
                background: var(--van-gradient-red);
                position: absolute;
                top: 0;
                right: 0;
                padding: 0 var(--van-padding-xs);
                color: white;
                font-style: normal;
                border-bottom-left-radius: 8px;
                border-top-right-radius: 8px;
                font-size: var(--van-padding-xs);
              }

              h5 {
                font-size: var(--van-border-radius-lg);
                text-align: center;
                margin: 0 auto;

                span {
                  font-size: 18px;
                }
              }

              p {
                font-size: var(--van-font-size-xs);
                margin: 16px auto 0 auto;
                text-align: center;
                color: var(--van-gray-6);
              }
            }

            .active {
              background: var(--van-gradient-red);
              color: white;

              i {
                background: linear-gradient(to right, #FDEDD6, #EFC490);
                color: #803F27;
              }

              p {
                color: rgba(255, 255, 255, 0.8);
              }
            }

          }

        }

      }

    }

    .videobtn {
      margin-top: 12px;

      .tips {
        color: #F0C398;
        text-align: center;
        font-size: 12px;
        margin: 0;
      }

      .van-button {
        background: linear-gradient(to bottom, #FE9E2F, #FF5637);
        color: white;
        margin: 8px auto 0 auto;
        display: block;
        padding-left: 24px;
        padding-right: 24px;
        font-weight: bold;
        box-shadow: rgb(255 86 55 / 60%) 0px 4px 6px 3px;
        border-color: white;
      }
    }

  }
}

.custom-title {
  margin-right: 4px;
  vertical-align: middle;
}

.search-icon {
  font-size: 16px;
  line-height: inherit;
}

/* ./ 视频随心选 end here */


/* xxx */

/* ./ xxx end here */
</style>